<template>
    <div class="menu-bar" v-if="!showOuterRef">

        <img src="@/assets/images/png/liehao.png" style="width: 120px;padding-left: 15px;" @click="toHomePage()" />

        <div style="padding-right: 15px;">


            <n-popover :show="showPopover" placement="bottom" trigger="manual" :show-arrow="false"
                @update:show="handleUpdateShow">
                <template #trigger>

                    <SvgIcon  color="#ffff" name="icon_search" width="30px" height="30px" @click="showPopoverBar">
                    </SvgIcon>

                </template>

                <n-input-group>
                    <n-input v-model:value="searchValue" type="text" placeholder="请输入要搜索的内容"
                    :disabled="selectedTab == '999'"
                        @keydown.enter="handleEnter"
                        passively-activated />
                    <n-button type="primary" ghost @click="goSearchPage">
                        搜索
                    </n-button>
                </n-input-group>


            </n-popover>


            <img @click="doShowOuter" src="@/assets/images/png/菜单.png" style="height: 35px;margin-left: 15px;" />
        </div>

    </div>

    <n-drawer v-model:show="showOuterRef" width="100%">
        <n-drawer-content title="烈豪模型" closable style="--n-body-padding:0px">

            <n-config-provider :theme-overrides="themeOverrides">
                <n-menu class="custom-menu-height" :render-label="renderLabel" :options="home_nav_list"
                    v-model:value="selectedTab" @update:value="handleMenuSelect" />
            </n-config-provider>



        </n-drawer-content>
    </n-drawer>

</template>

<script setup>
import { ref, h, onMounted, defineProps } from 'vue';
import arrowRightIcon from '@/assets/images/svg/rightarrow.svg'
import SvgIcon from '@/components/SvgIcon.vue';
import { navbarMenu } from '@/api'
const props = defineProps({
    passTab: {
        type: String,
        required: true
    },
})
const home_nav_list = ref([])
const getHomeNavList = async () => {
    const params = {
        nav: '1,3',
    }
    const result = await navbarMenu(params)

    const simplified = result.data.map(item => ({
        key: item.id,
        label: item.name
    }));

    home_nav_list.value = [{
        key: "-1",
        label: '网站首页',

    }, ...simplified]


    const params1 = {
        nav: '1,3',
        parent_id: "1"
    }
    const result1 = await navbarMenu(params1)

    const simplified1 = result1.data.map(item => ({
        key: item.id,
        label: item.name
    }));


    const productList = [{ key: "-11", label: "全部 All" }, ...simplified1]

    for (let i = 0; i < home_nav_list.value.length; i++) {
        if (home_nav_list.value[i].key === '1') {

            home_nav_list.value[i].children = productList;
            break; // 找到后立即退出，提高性能
        }
    }
    console.log("home_nav_list", home_nav_list.value)

}
const selectedTab = ref(null); // 不默认选中任何 Tab
onMounted(() => {
    if (props.passTab) {
        selectedTab.value = props.passTab;
    }

    getHomeNavList();
});

// 2. 自定义渲染函数
const renderLabel = (option) => {

    // console.log('option', option)
    const hasChildren = Array.isArray(option.children) && option.children.length > 0


    return h(
        'div',
        { style: 'display: flex; align-items: center; justify-content: space-between; width: 100%;' },
        [
            // 左侧：菜单项文本
            h('span', null, option.label),
            // 右侧：为没有子菜单的项添加自定义图标
            !hasChildren ? h('img', {
                src: arrowRightIcon, // 使用导入的本地图标路径
                style: 'width: 14px;  margin-left: 8px;', // 设置图标尺寸和间距
            })
                : null
        ]
    )
}

const showOuterRef = ref(false)

const doShowOuter = () => {
    showPopover.value = false
    showOuterRef.value = true
}
// 1. 定义菜单数据 (options)
const menuOptions = [
    {
        label: '最新到货',
        key: 'latest_arrival'
    },
    {
        label: '产品中心',
        key: 'products',
        children: [
            { key: "-1", label: "全部 All" },
            {
                label: '静态模型',
                key: 'static_model'
            },
            {
                label: '遥控模型',
                key: 'control_model'
            },
            {
                label: '迷你四驱车',
                key: 'mini_4wd'
            },
            {
                label: '伊达雷利',
                key: 'yilileili'
            },
            {
                label: '万代BanDai',
                key: 'wandai'
            },
            {
                label: '工具Tool',
                key: 'tools'
            },
            {
                label: '油漆&喷漆',
                key: 'penqi'
            }
        ]
    },
    {
        label: '新货预告',
        key: 'new_product_preview',
    },
    {
        label: '批发公告',
        key: 'announcement'
    },
    {
        label: '新闻资讯',
        key: 'news_information'
    },
    {
        label: '网站留言',
        key: 'website_message'
    },
    {
        label: '关于我们',
        key: 'about_us'
    }
]

// const activeKey = ref(selectedTab.value) // 默认选中 'dashboard'

const handleMenuSelect = async (tabId, item) => {
    console.log('菜单项被选中:', tabId, item.label)
    // 在这里可以添加更多业务逻辑
    // 例如：使用 vue-router 进行页面跳转
    // router.push({ name: key }) 

    showOuterRef.value = false
    if (tabId == -1) {
        router.push({
            name: 'Home',
        })
    } else if (tabId == 4) {
        router.push({
            name: 'News',
        })
    } else if (tabId == 43) {
        router.push({
            name: 'Arrival',
        })
    } else if (tabId == 45) {
        router.push({
            name: 'Advance',
        })
    } else if (tabId == 36) {
        router.push({
            name: 'Board',
        })
    } else if (tabId == 37) {
        router.push({
            name: 'Company',
        })
    } else if (tabId == 41) {
        router.push({
            name: 'Wholesale',
        })
    } else {
        if (tabId == "-11") {
            router.push({
                name: 'Product',
                query: {
                    typeId: "-1"
                }
            })
        } else {
            router.push({
                name: 'Product',
                query: {
                    typeId: tabId
                }
            })
        }
    }
    selectedTab.value = tabId
}

const showPopover = ref(false)


const handleUpdateShow = (value) => {

}

const searchValue = ref(null)

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
function toHomePage() {
    showPopover.value = false
    router.push({
        name: 'Home',
    })
}

const showPopoverBar = () => {
      if( selectedTab.value=="999")return
    searchValue.value = null
    showPopover.value = !showPopover.value
}

const handleEnter = (e) => {
    console.log('用户按下了回车键，输入内容为：', e)
    goSearchPage()
}

const goSearchPage = () => {
    if( selectedTab.value=="999")return
    console.log("searchValue", searchValue.value)
    showPopover.value = false

    if (searchValue.value != "") {
        router.push({
            name: 'Search',
            query: {
                searchValue: searchValue.value
            }
        })
    }
}

const themeOverrides = {
    Menu: {
        // 修改激活且悬停时的文字颜色
        itemColorActiveHover: '#f5f5f5', // 例如改为红色
        itemColorActive: '#f5f5f5', // 例如改为红色
        // 其他常用颜色也可一并定制：
        // itemColorActive: 'darkblue',           // 激活状态下的文字颜色（非悬停）
        // itemColorHover: 'orange',               // 非激活但悬停时的颜色
        // itemColor: '#333',                      // 默认文字颜色
        // itemColorActiveCollapsed: 'lightblue',  // 折叠菜单中激活项颜色
    }
}

</script>


<style scoped lang="scss">
.menu-bar {
    height: 70px;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.n-base-close:not(.n-base-close--disabled):focus::before {
    background-color: transparent;
}



:deep(.n-menu .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header) {
    color: #00aeff !important;
}

:deep(.n-menu .n-menu-item-content.n-menu-item-content--child-active .n-menu-item-content-header) {
    color: #00aeff !important;
}

:deep(.custom-menu-height .n-menu-item,
    .custom-menu-height .n-menu-item-group-header) {
    /* 设置您想要的高度 */
    height: 51px !important;
    /* 设置行高以确保文字垂直居中 */
    line-height: 51px !important;



}

:deep(.custom-menu-height .n-menu-item-content) {
    /* 设置您想要的高度 */
    height: 51px !important;
    /* 设置行高以确保文字垂直居中 */
    line-height: 51px !important;
}

/* 如果需要调整子菜单项的高度 */
:deep(.custom-menu-height .n-menu-item-content--child,
    .custom-menu-height .n-menu-item--child) {
    height: 51px !important;
    line-height: 51px !important;
}


:deep(.n-input__state-border) {
    --n-border-hover: 1px solid #00aeff !important;
    --n-border-focus: 1px solid #00aeff !important;

}

:deep(.n-button) {
    --n-border: 1px solid #00aeff !important;
    --n-text-color: #00aeff !important;
}
</style>